<template>
  <div>
    <aplayer :audio="audio" :lrcType="3" />
    <div class="title">
      <span>编号</span><span>歌曲名</span><span>歌手</span>
    </div>
    <ul>
      <li
        v-for="(music, index) in list"
        :key="music.id"
        @click="getSong(music.id)"
      >
        <div>{{ index + 1 }}</div>
        <div>{{ music.name }}</div>
        <div>{{ music.ar[0].name }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import APlayer from "@moefe/vue-aplayer";

Vue.use(APlayer);

export default {
  data() {
    return {
      audio: [],
      list: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.axios
        .get("https://bird.ioliu.cn/netease/playlist?id=3140553065")
        .then((res) => {
          this.list = res.data.playlist.tracks;
          console.log(res);
          this.getSong(this.list[0].id);
        });
    },
    getSong(id) {
      this.axios
        .get("https://bird.ioliu.cn/netease/song?id=" + id)
        .then((res) => {
          this.audio = {
            name: res.data.data.name,
            artist: res.data.data.ar[0].name,
            url: res.data.data.mp3.url,
            cover: res.data.data.al.picUrl,
          };
        });
    },
  },
};
</script>
  


<style lang="scss" scoped>
li {
  width: 100%;
  height: 0.8rem;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  color: orangered;
  border-bottom: 1px solid gainsboro;
  line-height: 0.8rem;
}
.click {
  color: orangered;
}
.title {
  display: flex;
  justify-content: space-around;
}
</style>